<template>
  <div class="login-wrapper">
    <a-row class="login-row" type="flex" align="center">
      <a-col :xs="{ span: 22 }" :lg="{ span: 8 }">
        <a-card>
          <img className="logo-img" src="@/assets/images/logo-wolf.png" alt="" />
          <a-form
            ref="ruleForm"
            :rules="rules"
            :model="formState"
            :label-col="{ style: { width: '80px' } }"
            name="basic"
            autocomplete="off"
            @finish="onFinish"
          >
            <a-form-item label="用户名" name="username">
              <a-input v-model:value="formState.username" />
            </a-form-item>

            <a-form-item label="密码" name="password">
              <a-input-password v-model:value="formState.password" />
            </a-form-item>

            <a-form-item>
              <a-button block type="primary" html-type="submit">登录</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import type { Rule } from 'ant-design-vue/es/form'
import { useRouter } from 'vue-router'

const rules: Record<string, Rule[]> = {
  username: [{ required: true, message: '请输入用户名', trigger: 'change' }],
  password: [{ required: true, message: '请输入用户名', trigger: 'change' }]
}

const formState = reactive({
  username: '',
  password: '',
  remember: true
})

const router = useRouter()

const onFinish = (values: any) => {
  router.push({ path: '/' })
}
</script>

<style scoped lang="scss">
.login-wrapper {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/images/login-bg.jpeg') no-repeat center center;
  .login-row {
    height: 100vh;
    :deep(.ant-card) {
      position: relative;
      top: 50%;
      transform: translate(0, -50%);
    }
  }
  .logo-img {
    display: block;
    margin: 0px auto 10px;
    width: 120px;
  }
}
</style>
